<template>
  <div class="grzldiv">
    <div class="title">
      <h3>个人资料</h3>
      <hr class="hr" />
      <div class="grzl">
        <el-upload
          class="avatar-uploader"
          :action="poot+'headportrait/'+user"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <div class="wenzi" v-if="JSON.stringify(list) != '{}'">
          <font class="id">ID:{{this.user}}</font>
          <br />
          <font class="gz">收藏 {{list.blogdata.collection}}&nbsp;&nbsp;</font>
          <font class="gz">粉丝 {{list.blogdata.fans}}</font>
          <!-- <font class="gz">等级 3</font> -->
          <el-popover placement="bottom" title="等级规则" width="230" trigger="hover">
            <el-button size="mini" class="djbtu" slot="reference">
              <font class="gz">等级 {{list.blogdata.grade}}</font>
            </el-button>
            <h4>积分评定</h4>
            <hr />
            <div class="djgz">
              发表文章：10分
              <br />被评论:5分 评论他人:5分
              <br />被点赞:3分 点赞他人:2分
              <br />被浏览:2分 浏览他人:1分
              <br />被收藏:8分 收藏他人:3分
              <br />
              <h4>等级评定</h4>
              <hr />

              <div class="divdjpd">
                <font class="djpd">1:0&nbsp;&nbsp;</font>
                <font class="djpd">2:50&nbsp;&nbsp;</font>
                <font class="djpd">
                  3:150
                  <br />
                </font>
                <font class="djpd">4:300&nbsp;&nbsp;</font>
                <font class="djpd">5:500&nbsp;&nbsp;</font>
                <font class="djpd">
                  6:1000
                  <br />
                </font>
                <font class="djpd">7:2000&nbsp;</font>
                <font class="djpd">8:4000&nbsp;</font>
                <font class="djpd">10:10000</font>
              </div>
            </div>
          </el-popover>
          <br />*温馨提示：等级更新有延迟(1小时)，请稍后再查看
        </div>
      </div>
      <hr class="hr2" />
    </div>
    <h2 @click="xgzl">{{xgzlwenzi}}</h2>
    <div class="nr" v-if="bianji &&JSON.stringify(list) != '{}'">
      <div class="nrfont">昵称:{{list.blogdata.users.users.nickname}}</div>
      <div class="nrfont">姓名:{{list.blogdata.users.users.name}}</div>
      <div class="nrfont">性别:{{list.blogdata.users.users.gender}}</div>
      <div class="nrfont">生日:{{list.blogdata.users.users.birthday}}</div>
      <div class="nrfont">敲出第一行代码的时间:{{list.blogdata.users.users.firstlinecode}}</div>
      <div class="nrfont">简介：{{list.blogdata.users.users.autograph}}</div>
    </div>
    <div class="nr" v-if="!bianji">
      <br />
      <el-input v-model="nicheng" placeholder="请输入昵称"></el-input>
      <el-input v-model="xingming" placeholder="请输入姓名"></el-input>
      <div class="xb">
        <el-radio v-model="radio" label="1">男</el-radio>
        <el-radio v-model="radio" label="2">女</el-radio>
      </div>
      <div class="block">
        <h4>生日</h4>
        <el-date-picker
          v-model="value1"
          type="date"
          size="small"
          placeholder="选择日期"
          :picker-options="pickerOptions"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </div>
      <div class="block">
        <h4>第一行代码</h4>
        <el-date-picker
          v-model="value2"
          type="date"
          size="small"
          placeholder="选择日期"
          :picker-options="pickerOptions"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </div>
      <el-input
        class="textarea"
        type="textarea"
        placeholder="请输入简介"
        v-model="textarea"
        maxlength="100"
        show-word-limit
        autosize
      ></el-input>
      <el-button type="warning" @click="qrxg">确定修改</el-button>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  data() {
    return {
      bianji: true,
      xgzlwenzi: "修改资料",
      radio: "1",
      nicheng: "",
      xingming: "",
      value1: "",
      value2: "",
      textarea: "",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      list: {},
      imageUrl: ""
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    qrxg() {
      var xb = "女";
      if (this.radio == "1") {
        xb = "男";
      }
      this.$http
        .get(
          this.poot +
            "updateusers/" +
            this.user +
            "/" +
            this.xingming +
            "/" +
            this.value1 +
            "/" +
            xb +
            "/" +
            this.nicheng +
            "/" +
            this.textarea +
            "/" +
            this.value2
        )
        .then(response => {
          this.chushihua();
          this.xgzl();
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    xgzl() {
      this.bianji = !this.bianji;
      if (!this.bianji) {
        this.xgzlwenzi = "取消";
      } else {
        this.xgzlwenzi = "修改资料";
      }
    },
    chushihua() {
      this.$http
        .get(this.poot + "personal/" + this.user)
        .then(response => {
          this.list = response.data;
          this.nicheng = this.list.blogdata.users.users.nickname;
          this.xingming = this.list.blogdata.users.users.name;
          if (this.list.blogdata.users.users.gender == "男") {
            this.radio = "1";
          } else {
            this.radio = "2";
          }
          this.value1 = this.list.blogdata.users.users.birthday.replace(
            /\//g,
            "-"
          );

          this.value2 = this.list.blogdata.users.users.firstlinecode.replace(
            /\//g,
            "-"
          );
          //   alert(this.value2)
          this.textarea = this.list.blogdata.users.users.autograph;
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  },
  computed: {
    ...mapState(["leixing"]),
    ...mapState(["poot"]),
    ...mapState(["user"])
  },
  mounted() {
    this.chushihua();
    this.imageUrl =
      this.poot +
      "manongyizhanFile/users/" +
      this.user +
      "/头像/" +
      this.user +
      ".jpg";
  }
};
</script>
<style scoped>
.el-button {
  width: 50%;
  margin: 20px;
  background-color: #161616;
}
.textarea {
  width: 50%;
}
h4 {
  width: 100px;
}
.block {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70%;
}

.xb {
  width: 60%;
  margin-left: 20%;
}

.el-input {
  width: 50%;
  margin: 10px;
}
h2 {
  margin-left: 90%;
  margin-top: 10px;
  color: #354b7b;
}
.nrfont {
  width: 600px;
  margin-top: 20px;
  font-size: 15px;
}
.nr {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.hr2 {
  margin-left: 170px;
  height: 1px;
  background-color: #ccc;
  border: none;
  margin-right: 20px;
}
.divdjpd {
  width: 100%;
}
.djpd {
  width: 150px;
  /* background-color: #000; */
}
.djbtu {
  background-color: #1e1e1e;
  border: 0;
  margin: 0;
  margin-left: 0;
  height: 20px;
  width: 30px;
  /* display: flex;
  justify-content: center;
  align-items: center; */
}
.gz {
  font-size: 20px;
  color: #354b7b;
}
.id {
  font-size: 20px;
}
.wenzi {
  margin-top: 30px;
  margin-left: 20px;
  margin-top: 50px;
}
.grzl {
  height: 170px;
  display: flex;
  /* align-items: center; */
}
.el-avatar {
  margin: 30px;
}
.hr {
  height: 2px;
  color: #ccc;
  background-color: #ccc;
  border: none;
  margin-left: 20px;
  margin-right: 20px;
}
.grzldiv {
  width: 100%;
  margin: 20px;
  background-color: #1e1e1e;
  height: 740px;
}
h3 {
  color: #354b7b;
  font-size: 20px;
  margin: 40px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 130px;
  height: 130px;
  display: block;
  margin: 50px;
  margin-top: 30px;
  border-radius: 90px;
}
</style>